<template>
  <div class="tableGenInfo">
     <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
          <el-row>
               <el-col :span="12">
               <el-form-item prop="tplCategory">
                    <span slot="label">生成模板</span>
                    <el-select v-model="info.tplCategory" @change="tplSelectChange">
                    <el-option label="单表（增删改查）" value="crud" />
                    <el-option label="树表（增删改查）" value="tree" />
                    <el-option label="主子表（增删改查）" value="sub" />
                    </el-select>
               </el-form-item>
               </el-col>
               <el-col :span="12">
               <el-form-item prop="packageName">
                    <span slot="label">
                    生成包路径
                    <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
                    <i class="el-icon-question"></i>
                    </el-tooltip>
                    </span>
                    <el-input v-model="info.packageName" />
               </el-form-item>
               </el-col>

               <el-col :span="12">
               <el-form-item prop="moduleName">
                    <span slot="label">
                    生成模块名
                    <el-tooltip content="可理解为子系统名，例如 system" placement="top">
                    <i class="el-icon-question"></i>
                    </el-tooltip>
                    </span>
                    <el-input v-model="info.moduleName" />
               </el-form-item>
               </el-col>

               <el-col :span="12">
               <el-form-item prop="businessName">
                    <span slot="label">
                    生成业务名
                    <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
                    <i class="el-icon-question"></i>
                    </el-tooltip>
                    </span>
                    <el-input v-model="info.businessName" />
               </el-form-item>
               </el-col>

               <el-col :span="12">
               <el-form-item prop="functionName">
                    <span slot="label">
                    生成功能名
                    <el-tooltip content="用作类描述，例如 用户" placement="top">
                    <i class="el-icon-question"></i>
                    </el-tooltip>
                    </span>
                    <el-input v-model="info.functionName" />
               </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         上级菜单
                         <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
                             <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <treeselect
                              :append-to-body="true"
                              v-model="info.parentMenuId"
                              :options="menus"
                              :normalizer="normalizer"
                              :show-count="true"
                              placeholder="请选择系统菜单"
                         />
                    </el-form-item>
               </el-col>

               <el-col :span="12">
                    <el-form-item prop="genType">
                         <span slot="label">
                         生成代码方式
                         <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-radio v-model="info.genType" label="0">zip压缩包</el-radio>
                         <el-radio v-model="info.genType" label="1">自定义路径</el-radio>
                    </el-form-item>
               </el-col>

               <el-col :span="24" v-if="info.genType == '1'">
                    <el-form-item prop="genPath">
                         <span slot="label">
                         自定义路径
                         <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-input v-model="info.genPath">
                         <el-dropdown slot="append">
                         <el-button type="primary">
                              最近路径快速选择
                              <i class="el-icon-arrow-down el-icon--right"></i>
                         </el-button>
                         <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item @click.native="info.genPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
                         </el-dropdown-menu>
                         </el-dropdown>
                         </el-input>
                    </el-form-item>
               </el-col>
          </el-row>
          <el-row v-show="info.tplCategory == 'tree'">
               <h4 class="form-header">其他信息</h4>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         树编码字段
                         <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-select v-model="info.treeCode" placeholder="请选择">
                         <el-option
                         v-for="(column, index) in info.columns"
                         :key="index"
                         :label="column.columnName + '：' + column.columnComment"
                         :value="column.columnName"
                         ></el-option>
                         </el-select>
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         树父编码字段
                         <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-select v-model="info.treeParentCode" placeholder="请选择">
                         <el-option
                         v-for="(column, index) in info.columns"
                         :key="index"
                         :label="column.columnName + '：' + column.columnComment"
                         :value="column.columnName"
                         ></el-option>
                         </el-select>
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         树名称字段
                         <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-select v-model="info.treeName" placeholder="请选择">
                         <el-option
                         v-for="(column, index) in info.columns"
                         :key="index"
                         :label="column.columnName + '：' + column.columnComment"
                         :value="column.columnName"
                         ></el-option>
                         </el-select>
                    </el-form-item>
               </el-col>
          </el-row>
          <el-row v-show="info.tplCategory == 'sub'">
               <h4 class="form-header">关联信息</h4>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         关联子表的表名
                         <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-select v-model="info.subTableName" placeholder="请选择" @change="subSelectChange">
                         <el-option
                         v-for="(table, index) in tables"
                         :key="index"
                         :label="table.tableName + '：' + table.tableComment"
                         :value="table.tableName"
                         ></el-option>
                         </el-select>
                    </el-form-item>
               </el-col>
               <el-col :span="12">
                    <el-form-item>
                         <span slot="label">
                         子表关联的外键名
                         <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
                         <i class="el-icon-question"></i>
                         </el-tooltip>
                         </span>
                         <el-select v-model="info.subTableFkName" placeholder="请选择">
                         <el-option
                         v-for="(column, index) in subColumns"
                         :key="index"
                         :label="column.columnName + '：' + column.columnComment"
                         :value="column.columnName"
                         ></el-option>
                         </el-select>
                    </el-form-item>
               </el-col>
          </el-row>
     </el-form>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue ,Prop,Watch} from 'vue-property-decorator';
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
@Component({
  components: {
      Treeselect
  },
})
export default class ToDoList extends Vue {
    @Prop() params!: any;
    private info:any={};
    private tables:any={};
    private menus:any={};
    private subColumns:any=[];
    public formData:any={
          genTemplete: 2,
          packagePath: "",
          genTempleteName: "",
          genBusinessPackageName: "",
          genFunctionName: "",
     };
     //表单校验
     public rules={
          tplCategory: [
               { required: true, message: "请选择生成模板", trigger: "blur" }
          ],
          packageName: [
               { required: true, message: "请输入生成包路径", trigger: "blur" }
          ],
          moduleName: [
               { required: true, message: "请输入生成模块名", trigger: "blur" }
          ],
          businessName: [
               { required: true, message: "请输入生成业务名", trigger: "blur" }
          ],
          functionName: [
               { required: true, message: "请输入生成功能名", trigger: "blur" }
          ]
      }

     //候选项
     public genTempleteOptions=[{
          "label": "单表(增删改查)",
          "value": "1"
        }, {
          "label": "树表(增删改查)",
          "value": 2
     }];

     async created(){
         this.info=this.params.info;
         this.menus=this.params.menus;
     }
     
     @Watch("info.subTableName")
     private subTableNameChange(val:any){
          this.subSelectChange(val);
     }
     normalizer(node:any) {
          if (node.children && !node.children.length) {
              delete node.children;
          }
          return {
               id: node.menuId,
               label: node.menuName,
               children: node.children
          };
    }
    /** 选择子表名触发 */
    subSelectChange(value:any) {
         this.info.subTableFkName = '';
    }
    /** 选择生成模板触发 */
    tplSelectChange(value:any) {
          if(value !== 'sub') {
               this.info.subTableName = '';
               this.info.subTableFkName = '';
          }
    }
    /** 设置关联外键 */
    setSubTableColumns(value:any) {
          for (var item in this.tables) {
          const name = this.tables[item].tableName;
          if (value === name) {
               this.subColumns = this.tables[item].columns;
               break;
          }
          }
    }

}
</script>
<style lang="less">
    .tableGenInfo{
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: column;
          .el-input--medium{
               width: 100%;
          }
          .full-width-input {
               width: 100% !important;
           }
          .el-form-item--medium {
               .el-radio {
                    line-height: 36px !important;
               }
               
               .el-rate {
                    margin-top: 8px;
               }
          }
          .el-form-item--small {
               .el-radio {
                    line-height: 32px !important;
               }
               
               .el-rate {
                    margin-top: 6px;
               }
          }
          .el-form-item--mini {
               .el-radio {
                    line-height: 28px !important;
               }
               
               .el-rate {
                    margin-top: 4px;
               }
          }
          .clear-fix:before,
          .clear-fix:after {
               display: table;
               content: "";
          }
          
          .clear-fix:after {
               clear: both;
          }
          
          .float-right {
               float: right;
          }
    }
</style>
<style lang="less" scoped>
.tableGenInfo{
       margin-top: 20px;
       width: 90%;
       margin-left: 5%;
      .table-container {
               table.table-layout {
                         width: 100%;
                         table-layout: fixed;
                         border-collapse: collapse;
                         td.table-cell {
                         display: table-cell;
                         height: 36px;
                         border: 1px solid #e1e2e3;
                    }
               }
          }
          .label-left-align ::v-deep .el-form-item__label {
                 text-align: left;
          }
          
          .label-center-align ::v-deep .el-form-item__label {
                 text-align: center;
          }
          
          .label-right-align ::v-deep .el-form-item__label {
                 text-align: right;
          }
          
          .static-content-item {
               min-height: 20px;
               display: flex;
               align-items: center;
               justify-content: center;
               ::v-deep .el-divider--horizontal {
                    margin: 0;
               }
          }
}
  
</style>
